<template>
  <div class="service-package">
    <div v-for="item in packageData" :key="index">
      <div>
        {{ item.type }}
      </div>
      <div class="list-container">
        <el-card style="width: 350px;height: 150px;" shadow="always" class="card-box" @click="toDetail(packageItem._id)"
          v-for="packageItem in item.children" :key="packageItem._id">
          <div class="triangle-box" style="background-color: #28D094;" v-if="packageItem.state == 1"></div>
          <div class="triangle-box" style="background-color: var(--el-color-primary);" v-if="packageItem.state == 2">
          </div>
          <div class="triangle-box" style="background-color: #FDDB78;" v-if="packageItem.state == 3"></div>
          <div class="triangle-box" style="background-color: #FA746B;" v-if="packageItem.state == 0"></div>
          <div class="triangle-box-small"></div>

          <div class="service-state" v-if="packageItem.state == 0">已驳回</div>
          <div class="service-state" v-if="packageItem.state == 1" style="background-color: #28D094;">待审核</div>
          <div class="service-state" v-if="packageItem.state == 2">使用中</div>
          <div class="service-state" v-if="packageItem.state == 3">已停用</div>
          <div class="right-descr">
            <div class="service-img">
              <img :src="packageItem.image" alt="">
            </div>
            <div class="descriptions-service">
              <div class="descriptions-item">
                {{ packageItem.name }}
              </div>
              <div class="descriptions-item-text">
                服务对象：{{ packageItem.intro }}
              </div>
              <div class="descriptions-item">
                <el-tag type="primary" style="margin-right: 10px;">
                  低血糖
                </el-tag>
                <el-tag type="primary">
                  高血压
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </div>

    </div>
  </div>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useFindData } from '../../composables/findData';
import { useRouter } from 'vue-router';
import { searchTypeDataApi } from '../../api/serviceItem';
const { servicePackageTypeData, getServicePackageTypeAsync, servicePackageData, getServicePackageDataAsync } = useFindData()
const router = useRouter()
onMounted(() => {
  getServicePackageTypeAsync()
  getServicePackageDataAsync()
  findData()
})
const packageData = ref([])
// 获取分组查询服务包的数据
const findData = () => {
  searchTypeDataApi().then(res => {
    if (res.code == 200) {
      console.log(res);
      packageData.value = res.data
    }
  })
}
const toDetail = (_id) => {
  router.push(`/data/servicePack/detail/${_id}`)
}
</script>

<style scoped lang="scss">
.service-package {
  margin-top: 30px;
}

.card-box:hover {
  background-color: #F2F7FB;
}

.card-box {
  position: relative;
  margin-top: 20px;
  margin-right: 20px;
}

.triangle-box {
  width: 60px;
  height: 60px;
  background: var(--el-color-primary);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* 三点定位 */
  transform: rotate(270deg);
  position: absolute;
  left: 300px;
  top: 0px;
}

.descriptions-item {
  margin-bottom: 20px;
}

.triangle-box-small {
  width: 20px;
  height: 20px;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  /* 三点定位 */
  transform: rotate(270deg);
  position: absolute;
  left: 330px;
  top: 0px;
}

.service-img {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 136px;
    height: 98px;
  }
}

.right-descr {
  display: flex;
}

.descriptions-service {
  width: 150px;
  margin-left: 20px;

}

.service-state {
  font-size: 13px;
  color: #ffffff;
  position: absolute;
  left: 311px;
  top: 8px;
  transform: rotate(44deg);
}

.list-container {
  margin: 20px 0;
  width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</style>
<style>
.descriptions-item-text {
  font-size: 12px;
  color: #999999;
  width: 150px;
  height: 30px;
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 超出显示省略号 */

}
</style>